<template>
  <div class="wrapper">
    <div class="box">
      <h4>取车必备证件</h4>
      <div class="problem-show-list">
        <div>
          <div class="title">
            身份证 <i class="iconfont icon-shenfenzhengzhengmian"></i>
          </div>
          <p>
            用车人本人有效的二代身份证，用车人年龄在18-70周岁（首次用车需携带身份证原件，二次或多次用车支持电子身份证）
          </p>
        </div>
        <div>
          <div class="title">
            驾驶证<i class="iconfont icon-jiashizheng"></i>
          </div>
          <p>
            距初次领取证件日期大于180天且在有效期内的中华人民共和国机动车驾驶证（首次用车需携带驾驶证原件，部分地区支持使用电子驾照，具体以地方交管部门政策为准。二次或多次用车支持电子驾照）。
          </p>
        </div>
      </div>
    </div>
    <div class="box">
      <h4>取消规则</h4>
      <div class="row">
        <div class="left">取消时间</div>
        <div class="right">扣费标准</div>
      </div>
      <div class="row hightLight">
        <div class="left">取车前两小时</div>
        <div class="right">免费取消</div>
      </div>
      <div class="row">
        <div class="left">取车时间2h内（含）-取车时间后</div>
        <div class="right">整单标准服务费30%（最高收取150）</div>
      </div>
      <div class="row">
        <div class="left">超过还车时间</div>
        <div class="right">订单总费用100%</div>
      </div>
    </div>
    <div class="box">
      <h4>用车区域</h4>
      <p class="answer">
        取车地点不在当地的租赁车辆不允许进入泸沽湖景区，不允许进入西藏、甘孜州、阿坝州等地区，以取车门店所告知的规则为准
      </p>
    </div>
    <div class="box">
      <h4>发票</h4>
      <p class="answer">请向门店索取</p>
    </div>
  </div>
</template>

<script>

export default {
  name: "ProblemList",
  data () {
    return {
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 15px 15px 0 15px;
  .box {
    padding: 0 0 30px;
    h4 {
      margin: 0 0 10px 0;
    }
    .answer {
      font-size: 13px;
      color: #333;
    }
    .problem-show-list {
      div {
        .title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 15px;
          color: #333;
          .iconfont {
            margin-left: 5px;
            color: crimson;
          }
        }
        p {
          font-size: 13px;
          color: #333;
        }
      }
    }
    .row {
      display: flex;
      font-size: 14px;
      div {
        padding: 6px 0 6px 20px;
        border: 1px solid #d3d3d3;
      }
      .left {
        flex: 1;
      }
      .right {
        flex: 1;
        border-left: unset;
      }
    }
    .row + .row {
      .left {
        border-top: unset;
      }
      .right {
        border-top: unset;
      }
    }
    .hightLight {
      background-color: #e8f7f3;
    }
  }
}
</style>